<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            body {
                margin: 20px;
                background-image:url("02.jpg") ;
                background-size: cover;
            }

            .center_div {
                border:5px solid #6f9c8d;
                margin-left: auto;
                margin-right: auto;
                width: 80%;
                background-image: url(01.jpg);
                text-align: center;
                padding: 10px;
            }

            .ul1 {
                list-style-type: none;
                margin: 0 ;
                padding: 0;
                overflow: hidden;
                background-color: #0c603e;
            }

            .ul2 {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 120px;
                background-color: #0c603e;
                height:250px;
                position: fixed;
                overflow: auto;
            }

            li {
                float:left;
            }

            li a,.dropbth {
                display: inline-block;
                color:whitesmoke;
                text-align: center;
                padding: 16px 20px;
                text-decoration: none;
            }

            li a:hover, .dropdown:hover .dropbtn {
                background-color:#6f9c8d;}

            li.dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color:whitesmoke;
                min-width: 121px;
                box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
                z-index: 1;
            }

            .dropdown-content a {
                color:black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover {
                background-color: #0c603e;
            }
                
            .dropdown:hover .dropdown-content {
                display: block;
            }

            .footer {
                background-color: #0c603e;
                padding: 10px;
                margin: 0 auto;
                width: 80%;
                text-align: center;
                clear: both;
            }

            .page{
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                width: 80%;
            }

            img {
                max-width: 100%;
                height: auto;
            }

        </style>
    </head>
    <body>
        <header>
            <div class="center_div" id="1">
                <h1>罗小黑战记</h1>
                <h3>----愿你出走半生，仍留赤子之心。</h3>
                <ul class="ul1">
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">主要人物</a>
                        <div class="dropdown-content">
                            <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91/10712965?fromModule=lemma_inlink">罗小黑</a>
                            <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E7%99%BD/19817163?fromModule=lemma_inlink">罗小白</a>
                            <a href="https://zh.moegirl.org.cn/%E9%98%BF%E6%A0%B9(%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0)#">罗根（阿根）</a>
                            <a href="https://baike.baidu.com/item/%E6%AF%94%E4%B8%A2/19136882?fromModule=lemma_inlink">比丢</a>
                            <a href="https://baike.baidu.com/item/%E5%B1%B1%E6%96%B0/19407454?fromModule=lemma_inlink">山新</a>
                            <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/8383472#4_1">其他人物</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">衍生作品</a>
                        <div class="dropdown-content">
                          <a href="https://baike.baidu.com/item/%E8%93%9D%E6%BA%AA%E9%95%87/23752996?fromModule=lemma_inlink&fromtitle=%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0%C2%B7%E8%93%9D%E6%BA%AA%E9%95%87&fromid=23814701">蓝溪镇</a>
                          <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/22902442?fromModule=lemma_inlink">电影版罗小黑战记</a>
                        </div>
                    </li>
                    <li><a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/8383472#4_1">设定解释</a></li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">MTJJ工作室</a>
                        <div class="dropdown-content">
                            <a href="https://baike.baidu.com/item/%E4%B8%87%E5%9C%A3%E8%A1%97/23760166?lemmaFrom=lemma_starMap&fromModule=lemma_starMap">万圣街</a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <main>
            <ul class="ul2">
                <li>
                    <a class="active" href="index.html#1">目录</a>
                </li>
                <li>
                    <a class="active" href="index.html#a">蓝溪镇篇</a>
                </li>
                <li>
                    <a class="active" href="index.html#b">妖灵会馆篇</a>
                </li>
                <li>
                    <a class="active" href="index.html#c">众生之门篇</a>
                </li>
            </ul>
            <div class="page">
                <h2 id="a">蓝溪镇篇</h2>
                <img src="03.jpg">
                <h3>一个普通的雨夜，善良的小女孩————罗小白捡到了一只不太寻常的黑猫，并给他起名为“罗小黑”。从此，温馨搞笑的生活日常中似乎有什么正在慢慢变化，随着罗小白的回乡和哥哥罗根的出现，倪端也在渐渐浮出水面，一个罗小白从未了解过的世界，逐渐在她的眼前展开......</h3>
                <h2 id="b">妖灵会馆篇</h2>
                <img src="04.jpg">
                <h3>如果没有规矩，那么这个世界暗藏的另一面迟早会暴露在普通人面前————而妖灵会馆就是这个世界规则的制定者和监督者。只不过，好像有些规则，和社会的冲突并不小呢......</h3>
                <h2 id="c">众生之门篇</h2>
                <img src="05.jpg">
                <h3>一款全息游戏风靡全球，罗小黑众人受妖灵会馆委托，进入游戏，观察游戏和探查游戏背后的势力......</h3>
            </div>
        </main>
        <div class="footer">
            <h4>The Legend of Hei</h4>
            <p>作者主页<a href="https://gitee.com/across-the-starry-sea">ATSS</a></p>
        </div>
    </body>
</html>